<script setup>
import { defineEmits, reactive, ref } from 'vue'; // 导入 defineEmits、reactive 和 ref 函数
import { ElMessage } from 'element-plus'; // 导入 ElMessage 组件
import { addHallApi } from '@/service/shop.js'; // 假设你有一个添加厅的 API

const emit = defineEmits(['reload']); // 定义 emit 函数，用于触发父组件的 reload 事件
const drawerVisible = ref(false); // 抽屉的显示状态

const ruleForm = reactive({
    id: '', // 新增时不需要ID
    title: '', // 修正：将 `prop` 改为 `title`
    capacity: '', // 修正：将 `prop` 改为 `capacity`
    has_pillar: '', // 修正：将 `prop` 改为 `has_pillar`
    sort: '', // 修正：将 `prop` 改为 `sort`
    status: 1, // 修正：将 `prop` 改为 `status`
});

const rules = reactive({
    title: [
        { required: true, message: '请输入厅名称', trigger: 'blur' }, // 修正：将 `prop` 改为 `title`
        { min: 2, max: 50, message: '厅名称长度在 2 到 50 个字符', trigger: 'blur' }, // 修正：将 `prop` 改为 `title`
    ], 
});

// 打开抽屉
const openDrawer = () => {
    drawerVisible.value = true; // 显示抽屉
    clearForm(); // 清空表单数据
}

// 提交表单
const handleSubmit = async () => {
    try {
        await addHallApi(ruleForm).then(({ code, msg }) => { // 修正：将 `ruleForm` 改为 `ruleForm.value`
            if (code === 200) {
                ElMessage.success(msg); // 显示成功消息
                drawerVisible.value = false; // 关闭抽屉  
            } else {
                ElMessage.error(msg); // 显示错误消息
           
            }
        });
    } catch (error) {
        ElMessage.error('厅添加失败，请稍后重试'); // 显示错误消息 
    }
}

// 关闭抽屉
const closeDrawer = () => {
    drawerVisible.value = false; // 关闭抽屉
    clearForm(); // 清空表单数据
    emit('reload'); // 调用父组件的方法，刷新厅列表
}

// 清空表单数据
const clearForm = () => {
    ruleForm.id = ''; // 重置 ID 字段
    ruleForm.title = ''; // 重置厅名称字段
    ruleForm.capacity = ''; // 重置厅容量字段  
}

// 外部暴露的方法
defineExpose({
    openDrawer, // 暴露 openDrawer 方法
    closeDrawer, // 暴露 closeDrawer 方法
});

</script>

<template>
    <el-drawer title="添加厅信息" v-model="drawerVisible" size="30%">
        <el-form :model="ruleForm" :rules="rules" ref="shopFormRef" label-position="top">
            <el-form-item label="厅名称" prop="title">
                <el-input v-model="ruleForm.title" placeholder="请输入厅名称"></el-input>
            </el-form-item>
            <el-form-item label="厅容量" prop="capacity">
                <el-input v-model="ruleForm.capacity" placeholder="请输入厅容量"></el-input>
            </el-form-item>
            <el-form-item label="是否有柱" prop="has_pillar">
                <el-input v-model="ruleForm.has_pillar" placeholder="请输入是否有柱"></el-input>
            </el-form-item>
            <el-form-item label="排序" prop="sort">
                <el-input v-model="ruleForm.sort" placeholder="请输入排序"></el-input>
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <el-switch v-model="ruleForm.status" :active-value="1" active-text="使用中" :inactive-value="0" inactive-text="停用"></el-switch>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="closeDrawer">取 消</el-button>
            <el-button type="primary" @click="handleSubmit">确 定</el-button>
        </div>
    </el-drawer>
</template>